<template>
    <div class="globalHeader">
        <div class="global_left">
<!--            <div class="ishide" @click="$emit('update:iscollapse', !iscollapse)">-->
<!--                <el-icon v-if="!iscollapse"><fold /></el-icon>-->
<!--                <el-icon v-else><expand /></el-icon>-->
<!--            </div>-->
            <el-menu
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#545c64"
                    :default-active="activeIndex"
                    text-color="#fff"
                    active-text-color="#ffd04b"
            >
                <template  v-for="(item,index) in menuList" :key="index">
                    <el-menu-item :index="item.path" @click="setSideMenu(item.path)">
                        <el-icon> <component :is="item.icon" /> </el-icon>
                        <template #title>{{item.menuName}}</template>
                    </el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="userglobal">
            <el-dropdown>
                <el-avatar
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click.stop="loginOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import {useStore} from "vuex";
    export default defineComponent({
        name: 'GlobalHeader',
        props:{
            iscollapse:{
                type:Boolean
            }
        },
        setup() {
            const store = useStore();
            const activeIndex =  ref(store.getters.activeIndex);
            const menuList = ref(store.getters.menulist)
            function setSideMenu(path:string) {
                    activeIndex.value = path
                    store.dispatch("setSideMenu",path)
            }
            function loginOut() {
                store.dispatch("LoginOut")
            }
            return {menuList,activeIndex,setSideMenu,loginOut};
        },
    });
</script>
<style lang="scss">
    .globalHeader{
        height: 58px;
        background-color: #545c64;
        display: flex;
        padding: 0 10px;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        .userglobal{

        }
        .global_left{
            display: flex;
            color: #fff;
            align-items: center;
            flex: 1;
            .ishide{
                font-size: 32px;
                height: 32px;
                margin-right: 10px;
                cursor: pointer;
            }
            .el-menu{
                flex: 1;
            }
        }
    }
    .el-menu--horizontal{
        border-bottom: none !important;
    }
</style>
